import Link from 'next/link'
import Router from 'next/router'
import styles from "../styles/index.module.css"

import Myheader from '../components/Myheader'

export default function Home() {
  // 跳转
  function gotoB() {
    Router.push('/pageB')
  }

  // 动态传参
  function gotoStar() {
    Router.push('/star?name=Kobe')
  }
  function gotoStarObj() {
    Router.push({
      pathname: '/star',
      query: {
        name: 'James'
      }
    })
  }
  return (
    <div className={styles.wrap}>
      {/* 全局 Head */}
      <Myheader />

      <h1>首页</h1>
      <h2>1.Link 跳转</h2>
      <Link href="/pageA">
        <a>
          <span>Page A</span>
          <span style={{ marginLeft: "10px", color: 'red' }}>页面 A</span>
        </a>
        {/* 不支持兄弟标签并列 */}
        {/* <a>Page A</a> */}
      </Link>
      <br /><br />
      <Link href="/pageB">
        <a>Page B</a>
      </Link>

      <br /><br />
      <h2>2.编程式 跳转</h2>
      {/* 编程式路由跳转 */}
      <button onClick={() => Router.push('/pageA')}>编程式路由跳转 Page A</button>
      <br /><br />
      <button onClick={gotoB}>编程式路由跳转 Page B</button>

      <h2>3.Link 动态传参</h2>
      {/* Next 只能通过 query 传递参数，不能通过 path: id 传递 */}
      <Link href="/star?name=Kobe">
        <a>Kobe</a>
      </Link>
      <br /><br />
      <Link href="/star?name=James">
        <a>James</a>
      </Link>

      <h2>4.编程式 动态传参</h2>
      <button onClick={gotoStar}>编程式动态传参 Kobe</button>
      <br /><br />
      <button onClick={gotoStarObj}>编程式动态传参 James</button>

      <h2>5.钩子函数</h2>
      <Link href="/hookFunction">
        <a>跳转路由之钩子函数</a>
      </Link>
      <br /><br />
      {/* Hash 路由失效 */}
      <Link href="#hookFunction">
        <a>Hash 跳转路由之  钩子函数</a>
      </Link>

      <h2>6.Axios 请求远程数据</h2>
      <Link href="/tasks">
        <a>Axios获取远程数据</a>
      </Link>

      <h2>7.使用 JSX 写 CSS</h2>
      <Link href="/styleJSX">
        <a>JSX 写 CSS</a>
      </Link>

      <h2>8.Lazy Loading 实现模块懒加载</h2>
      <Link href="/lazy/unLazyMoment">
        <a>未使用 Lazy 获取时间</a>
      </Link>
      <br /><br />
      <Link href="/lazy/lazyMoment">
        <a>使用 Lazy 获取时间、Lazy 组件</a>
      </Link>

      <h2>9.自定义 Head</h2>
      <Link href="/header">
        <a>自定义 Head</a>
      </Link>

      <h2>9.使用 antd</h2>
      <Link href="/antd">
        <a>使用 antd</a>
      </Link>

      <h2>10.打包失败</h2>
    </div>
  )
}
